<template>
  <div class="weibo-like-layout">
    <!-- 第二部分：五分布局（模拟微博一条动态的核心信息区） -->
    <div class="section">
      <h3 class="section-title">第二部分：五部分布局</h3>
      <el-row :gutter="10" class="weibo-row">
        <!-- 1. 序号/状态区 -->
        <el-col :span="1">
          <div class="weibo-item">
            <div class="serial-number">1</div>
          </div>
        </el-col>
        <!-- 2. 头像区 -->
        <el-col :span="3">
          <div class="weibo-item">
<!--            <img :src="adminImage" alt="头像" class="avatar"/>-->
          </div>
        </el-col>
        <!-- 3. 昵称&内容区 -->
        <el-col :span="12">
          <div class="weibo-item weibo-main">
            <div class="nickname">{{ user.nc }}</div>
            <div class="content">
              <p>{{user.drb}}</p>
              <div style="color: #ff8200">
              <!-- 模拟输入框/交互区（对应你图里的空白框） -->
              <button class="interact-button" ref="DetailFen" @click="showFenSi(user.id)">({{allFenCount}})粉丝</button>
              <DetailFenPage ref="detailFenRef" />
              <button class="interact-button" ref="DetailFollower" @click="showFollower(user.id)">({{allFollowerCount}})关注</button>
              <DetailFollowerPage ref="detailFollowerRefRef" />
              点赞总数为{{allLikeCount}}
              </div>
            </div>
          </div>
        </el-col>
        <!-- 4. 数字标识区 -->
        <el-col :span="3">
          <div class="weibo-item">
            <div class="number-tag">5</div>
          </div>
        </el-col>
        <!-- 5. 额外操作/预留区 -->
        <el-col :span="5">
          <div class="weibo-item">
            <div class="extra-area">
              <p>1111</p>
              <!-- 底部空行，可后续加操作按钮等 -->
              <el-row class="bottom-row">
                <el-col :span="24">
                  <div class="bottom-div">
                    <!-- 预留区域，可加按钮或其他内容 -->
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 第三部分：三部分均分（模拟评论区/互动区等） -->
    <div class="section">
      <h3 class="section-title">第三部分：三部分均分</h3>
      <el-row :gutter="10" class="equal-row">
        <el-col :span="8">
          <div class="equal-item">1/3</div>
        </el-col>
        <el-col :span="8">
          <div class="equal-item">1/3</div>
        </el-col>
        <el-col :span="8">
          <div class="equal-item">1/3</div>
        </el-col>
      </el-row>
    </div>

    <!-- 第四部分：空区域（可扩展更多内容） -->
    <div class="section">
      <div class="section-content empty-section">
        <!-- 预留空区域 -->
        <my-post ref="detailMyPostRef"></my-post>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
// import adminImg from '../assets/admin.jpg';
import DetailFenPage from "./DetailFenPage.vue"
import DetailFollowerPage from './DetailFollowerPage.vue'
import MyPost from '../components/MyPost.vue'
const allLikeCount = ref(0);
// 粉丝/关注组件引用
const detailFenRef = ref<InstanceType<typeof DetailFenPage>>();
const allFenCount = ref(0); // 粉丝总数
const detailMyPostRef = ref<InstanceType<typeof MyPost>>();
const detailFollowerRefRef = ref<InstanceType<typeof DetailFollowerPage>>();
const allFollowerCount = ref(0);

// 用户信息
const user = ref({
  id: '',
  nc: '',
  drb: '',
});

// 粉丝/关注查询参数（ref对象）
const fenSi = ref({
  userId: '', // 用于传递用户ID
});
const follower = ref({
  fanId: '', // 用于传递用户ID
});

// 点击粉丝列表
const fenSiList = ref([]);
const followerList = ref([]);
const likeList = ref([]);
const like=ref({
  postId: '',
})
// 加载用户信息，并调用粉丝查询
const doUserList = async () => {
    const { data } = await axios.get('/api/user/1');
    user.value = data;
    console.log('当前用户ID：', user.value.id); // 确认用户ID是否获取到
    fenSi.value.userId = user.value.id;
    follower.value.fanId = user.value.id;
    like.value.postId = user.value.id;
  await loadFollowerData();
  await loadFenSiData();
  await loadLikeData();
  await showDetail(user.value)
};
// 点赞数据
const loadLikeData = async () => {
  const { data } = await axios.get('/api/like', {
    params: like.value,
  });
  likeList.value = data;
  allLikeCount.value = data.length;
}
// 点击粉丝数据
const loadFenSiData = async () => {
  // 2. 关键请求：传递ref对象的.value（关键修正）
  const { data } = await axios.get('/api/relation', {
    params: fenSi.value, // 正确：通过.value获取实际参数值
  });
  fenSiList.value = data;
  allFenCount.value = data.length; // 赋值粉丝数量
};
const loadFollowerData = async () => {
  // 2. 关键请求：传递ref对象的.value（关键修正）
  const { data } = await axios.get('/api/relation', {
    params: follower.value, // 正确：通过.value获取实际参数值
  });
  followerList.value = data;
  allFollowerCount.value = data.length; // 赋值粉丝数量
};
const showDetail = (obj) => {
  if (obj && detailMyPostRef.value) {
    detailMyPostRef.value.handleUpdateData(obj);
  } else {
    console.warn('用户ID不存在或组件未加载');
  }
};
// 点击粉丝按钮打开抽屉
const showFenSi = (userId: string) => {
  if (userId && detailFenRef.value) {
    detailFenRef.value.handleDetailData(userId);
  } else {
    console.warn('用户ID不存在或组件未加载');
  }
};
// 点击关注按钮打开抽屉
const showFollower = (userId: string) => {
  if (userId && detailFollowerRefRef.value) {
    detailFollowerRefRef.value.handleDetailData(userId);
  } else {
    console.warn('用户ID不存在或组件未加载');
  }
}



// 组件挂载后加载数据
onMounted(() => {
  doUserList();
});
// 输入框双向绑定变量
const inputValue1 = ref('');
const inputValue2 = ref('');
</script>


<style scoped>
.weibo-like-layout {
  width: 100%;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
  background-color: #f0f2f5;
}

.section {
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.section-title {
  font-size: 16px;
  color: #303133;
  padding: 8px 0;
  margin-bottom: 10px;
  font-weight: 500;
}

/* 微博动态行布局 */
.weibo-row {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}

.weibo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 1. 序号样式 */
.serial-number {
  font-size: 14px;
  color: #666;
}


.interact-button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color:white;
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.interact-button:hover {
  color: #ff8200; /* 鼠标悬浮时的文字颜色 */

}

/* 3. 主内容区样式 */
.weibo-main {
  flex-direction: column;
  align-items: flex-start !important;
}

.nickname {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.interact-input {
  width: 48%;
  margin-top: 10px;
}

/* 数字标识区样式 */
.number-tag {
  font-size: 14px;
  color: #999;
}

/* 额外区域样式 */
.extra-area {
  text-align: center;
}

/* 三部分均分区域样式 */
.equal-row {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-sizing: border-box;
}

.equal-item {
  text-align: center;
  padding: 20px 0;
  background-color: #e8f4fd;
  border: 1px solid #87c9f5;
  border-radius: 6px;
}

/* 空区域样式 */
.empty-section {
  width: 100%;
  height: 120px;
  background-color: #ffffff;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  box-sizing: border-box;
}
</style>

